<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册页面</title>
    <script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/jquery.cookie.min.js"></script>
    <style type="text/css">
        body {
            background-color:#00b38a;
            text-align:center;
        }

        .lp-login {
            position:absolute;
            width:500px;
            height:300px;
            top:50%;
            left:50%;
            margin-top:-250px;
            margin-left:-250px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px #12a591;
            padding: 57px 50px 35px;
            box-sizing: border-box
        }

        .lp-login .submitBtn {
            display:block;
            text-decoration:none;
            height: 48px;
            width: 150px;
            line-height: 48px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            background-image: -webkit-gradient(linear, left top, right top, from(#09cb9d), to(#02b389));
            background-image: linear-gradient(90deg, #09cb9d, #02b389);
            border-radius: 3px
        }


        input{
            height:30px;
            width:250px;
        }

        span {
            font-style: normal;
            font-variant-ligatures: normal;
            font-variant-caps: normal;
            font-variant-numeric: normal;
            font-variant-east-asian: normal;
            font-weight: normal;
            font-stretch: normal;
            font-size: 14px;
            line-height: 22px;
            font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial, "Helvetica Neue", Helvetica;
        }

    </style>
</head>
<body>

<form method="get" action="/static/welcome.html" id="toRegister">
    <table class="lp-login">
        <tr>
            <td align="right"><span>邮 箱</span></td>
            <td align="center">
                <input type="text" id="email" name="email" value=""/>
            </td>
        </tr>
        <tr>
            <td align="right"><span>密 码</span></td>
            <td align="center">
                <input type="password" id="password" name="password" value="" />
            </td>
        </tr>
		<tr>
            <td align="right"><span>确认密码</span></td>
            <td align="center">
                <input type="password" id="ConfirmPassword" name="ConfirmPassword" value="" />
            </td>
        </tr>
		<tr>
            <td align="right"><span>验证码</span></td>
            <td align="center">
                <input type="text" id="code" name="code" value="" style="width:160px;" />&nbsp;&nbsp;<a href="javascript:void(0);" onclick="toGetCode();" id="getCode">获取验证码</a>
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <button class="submitBtn" id="submitBtn">注册</button>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    $('#submitBtn').on('click',function(){
        var email = $("#email").val();
        var password = $("#password").val();
        var ConfirmPassword = $('#ConfirmPassword').val();
        var code = $('#code').val();
        if(email == '' || password == '' || ConfirmPassword == '' || code == ''){
            alert("please input email && password && ConfirmPassword && code");
            return false;
        }
        if(password != ConfirmPassword){
            alert('密码和确认密码必须完全一致!');
            return false;
        }
        $('#toRegister').attr({'action':'/static/welcome.html?email='+email});
        $.ajax({
            url:'/api/user/register/'+email+'/'+password+'/'+code,
            type:'get',
            async:false,
            data:{},
            timeout:5000,
            success:function(flag){
                if(flag.code > 0){
                    alert(flag.msg);
                    return false;
                }else{
                    $.cookie('email',email);
                    alert('注册成功');
                    window.location.href="/static/welcome.html";
                }
            }
        });
        return false;
    });
    // 当前时间戳
    var currentSec = 0;
    var toGetCode = function(){
		var email = $("#email").val();
		if(email == null || email == ''){
			alert('请填写接收验证码的邮箱地址');
			return false;
		}
		if(currentSec == 0){
		    currentSec = parseInt(new Date().getTime() / 1000);
		}else{
		    if(parseInt(new Date().getTime() / 1000) - currentSec <= 60){
		        alert('操作太过频繁,60s内只能发送1次。');
		        return false;
		    }
		}
		$.ajax({
			url:'/api/code/create/'+email,
			type:'get',
			data:{v:new Date().getTime()},
			success:function(rs){
				if(rs){
				    alert('发送验证码到邮箱成功');
                }else{
                    alert('发送验证码失败');
                }
			}
		});
	};
</script>
</body>
</html>
